import React, { Component } from 'react'
import {
    NavBar,
    List,
    Icon,
    InputItem,
    Grid,
    Button
} from 'antd-mobile'
import MyIcon from './chatIcon'
import { connect } from 'react-redux'
// import './chat.less'
import { sendMsg,readMsg } from '../../redux/action'


const Item = List.Item

class Chat extends Component{
    state={
        content:'',
        isShow:false,
        visible:false
    }
    toggleShow = () =>{
        const isShow = this.state.isShow
        this.setState({
            isShow:!isShow
        })
        if (isShow) setTimeout(()=>{
            window.dispatchEvent(new Event('resize'))
        },0)

    }
    send = () => {
        console.log('send',this.state)
        const from = this.props.user._id
        const to = this.props.match.params.userId
        const content = this.state.content.trim()
        if (content){
            this.props.sendMsg({ from, to, content })
            this.setState({ content:'' })
        }
    }
    componentWillMount() {
        //初始化表情列表数据
        const emojis = ['🙂','😂','🤣','😅','😆','😁','🙃',
            '😉','😇','🥰','😍','🤩','😘','😋','🤪','🤑','🤗','🤔','🤐','😐','😶','😏','😒',
            '🙄','🤥','😌','😔','😪','😴','😷','🤕','🤮','🤧','🥵','🥴','🤠','🤓']
        this.emojis =emojis.map(emoji=>({text:emoji}))
    }
    componentDidMount() {
        window.scrollTo(0,document.body.scrollHeight)

    }
    componentWillUnmount() {
        const targetId = this.props.match.params.userId
        const userId = this.props.user._id
        this.props.readMsg(targetId,userId)
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        window.scrollTo(0,document.body.scrollHeight)
    }

    render() {
        const { user, chat } = this.props
        const { users, chatMsgs } = chat
        let from = user._id,
            to = this.props.match.params.userId
        if (!users[to]) return null
        const chatId = [from,to].sort().join('_')
        const currentChats = chatMsgs.filter(e => e.chat_id === chatId)
        
        const targetHeader = users[to].avatar
        const targetIcon = targetHeader? <MyIcon Header={targetHeader}/>:null
        return(
            <div className= 'chat-page'>
                <NavBar
                    className='stickyHead'
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.props.history.goBack() }
                >  {users[to].username} </NavBar>
                <div
                    // style={
                    //     { marginTop:50, marginBottom:(this.state.isShow)?260:50 }
                    // }
                    className={`${this.state.isShow?"chat-list-change":"chat-list"}`}
                >
                    <List >
                        {
                            currentChats.map(chat =>
                                <Item
                                    key={chat._id}
                                    className={ chat.from === from? 'chat-me': null }
                                    extra={
                                        chat.from === from? <MyIcon Header = { user.header }/> : null
                                    }
                                    thumb={
                                        chat.from === from? null: targetIcon
                                    }
                                >
                                    { chat.content }
                                </Item>
                            )
                        }
                    </List>
                </div>
                <div className='am-tab-bar'>
                    <InputItem
                        placeholder='请输入...'
                        value={this.state.content}
                        extra={
                            <div style={{height:25,paddingTop:5}}>
                            <span
                                onClick={this.toggleShow}
                                style={{marginRight:10}}
                            >😀</span>
                                <span  onClick={this.send}>发送</span>
                            </div>
                        }
                        onChange={ val => this.setState({ content:val }) }
                        onFocus={()=>this.setState({isShow:false})}
                    />
                    {
                        this.state.isShow?
                            <Grid
                                className='grid'
                                data={this.emojis}
                                columnNum={8}w
                                carouselMaxRow={4}
                                square={false}
                                isCarousel={true}
                                onClick={item=>this.setState({content:this.state.content+item.text})}
                            />:null
                    }

                </div>
            </div>
        )
    }
}

export default connect(
    state=>({
        user:state.user,
        chat:state.chat
    }),
    { sendMsg, readMsg }
)(Chat)
